<template>
  <div class="sidebar">
    <div class="component_libraries">组件库</div>
    <div v-for="(item,index) in menuData">
      <div class="line"></div>
      <div class="menu-group-title">{{item.title}}</div>
      <div class="menu-group-list">
        <div v-for="(type,index) in item.items" class="menu_type" @click="openMENU(type)">
          <img :src="type.image" class="img">
          <p class="menu_text">{{type.text}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
/**
* description: 左侧的bar内容
*/
import menuConfig from '@/config/menu.config';
import bus from '@/untils/bus'
export default {
  name: "sideBar",
  data() {
    return {
      menuData: menuConfig
    };
  },
  methods:{
    openMENU(type){
      bus.$emit('change_page',type)
    }
  }
};
</script>
  
<style lang="scss" scoped>
.sidebar {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  overflow-y: auto;
  overflow-x: hidden;

  .component_libraries {
    font-size: 18px;
    font-family: MicrosoftYaHeiSemibold;
    color: #404144;
    width: 328px;
    height: 67px;
    line-height: 67px;
    padding-left: 20px;
    text-align: left;
  }
  .line{
    border-top: 1px solid #E9EDF4;
    margin: 0 20px;
  }

  .menu-group-title {
    text-align: left;
    height: 62px;
    line-height: 62px;
    font-size: 16px;
    font-family: MicrosoftYaHeiSemibold;
    color: #404144;
    padding-left: 20px;
    width: 328px;
  }
  .menu-group-list {
    display: flex;
    flex-wrap: wrap;

    .menu_type {
      width: 74px;
      height: 71px;
      margin-left: 6px;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;

      img{
        width: 32px;
        height: 32px;
        padding-top: 8px;
      }
    }
    .menu_type:hover{
      background: #00B3A8;
      cursor: pointer;
      border-radius: 4px;
      width: 74px;
      height: 71px;
    }

    .menu_text{
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #666666;
      line-height: 18px;
    }
  }
}
.sidebar::-webkit-scrollbar{
    display: none;
}
</style>